<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        1 元素选择器    根据标签的名字确定样式的作用元素
            语法: 标签名{}
            缺点：某些同名的元素不希望使用某些样式，某些不同的也使用该样式，都无法协同
        2 id选择器  根据标签的id值确定样式的作用元素
                    一般每个元素都存有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性
            语法：#id值{}    
            缺点：id值有唯一性，样式只能作用到一个元素上
            
        3 class选择器   根据元素的class属性值可以重复 而且一个元素的class属性可以有多个值    
                        元素的class属性可以重复 而且一个元素的class属性可以有多个值
            语法：.class属性值{}                
        
        */

        /*#btn4{
            width: 80px;
            height: 40px;
            background-color:chartreuse
            color：white
            border：3px solid green;
            font-size:22px;
            font-family: '隶书';
            line-height:30px;
            border-radius:5px;
        }*/

        .shapeClass{
            width: 80px;
            height:40px;
            border-radius:5px;
        }

        .colorClass{
            background-color:rgb(179, 241, 85);
            color:white;
            border:3px solid green;
        }

        .fontClass{
            font-size:20px;
            font-family: '隶书';
            line-height: 30px;
        }



    </style>
</head>
<body>
    <input  id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮一"/>
    <br>
    <input id="btn2" type="button" value="按钮二"/>
    <br>
    <input id="btn3" type="button" value="按钮三"/>
    <br>
    <input id="btn4" type="button" value="按钮四"/>
    <br>
    
    
</body>
</html>